<template>
  <el-dialog :title="lineFormData.id?'编辑线路':'新增线路'" :visible="showLineDialog" @close="close">
    <el-form ref="lineForm" label-width="110px" :model="lineFormData" :rules="rules">
      <el-form-item label="线路编号" prop="number">
        <el-input v-model="lineFormData.number" placeholder="请输入线路编号" />
      </el-form-item>
      <el-form-item label="线路名称" prop="name">
        <el-input v-model="lineFormData.name" placeholder="请输入线路名称" />
      </el-form-item>
      <el-form-item label="线路类型" prop="type">
        <!-- <el-input v-model="lineFormData.num" placeholder="请输入线路名称" /> -->
        <el-select v-model="lineFormData.type" style="width:100%" :disabled="Boolean(lineFormData.id)">
          <el-option
            v-for="item in setMap.tranportLineType"
            :key="item.id"
            :label="item.label"
            :value="item.id"
            placeholder="请输入线路类型"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="起始地机构" prop="startOrganId">
        <Treeselect
          v-model="lineFormData.startOrganId"
          :options="tree"
          :normalizer="normalizer"
          placeholder="请选择起始地机构"
          :disabled="Boolean(lineFormData.id)"
        />
      </el-form-item>
      <el-form-item label="目的地机构" prop="endOrganId">
        <Treeselect
          v-model="lineFormData.endOrganId"
          :options="tree"
          :normalizer="normalizer"
          placeholder="请选择目的地机构"
          :disabled="Boolean(lineFormData.id)"
        />
      </el-form-item>
      <div v-if="lineFormData.id">
        <el-form-item label="距离">
          <el-input v-model="lineFormData.distance" />
        </el-form-item>
        <el-form-item label="成本">
          <el-input v-model="lineFormData.cost" />
        </el-form-item>
      </div>
    </el-form>
    <template #footer>
      <el-row type="flex" justify="center">
        <el-button type="primary" @click="subLine">确认</el-button>
        <el-button @click="close">取消</el-button>
      </el-row>
    </template>
  </el-dialog>
</template>

<script>
import { addTransportLine, editTransportLine, getTransportLineDetail } from '@/api/transport'
import setMap from '@/constant/setMap'
export default {
  props: {
    showLineDialog: {
      type: Boolean,
      default: false
    },
    tree: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      setMap,
      lineFormData: {
        number: '',
        name: '',
        type: '',
        startOrganId: null,
        endOrganId: null
      },
      rules: {
        number: [{ required: true, message: '线路编号不能为空', trigger: 'blur' },
          { pattern: /^XL\d{6}$/, message: '线路编号前两位为XL，后6位位数字，请重新输入', trigger: 'blur' }],
        name: [{ required: true, message: '线路编号不能为空', trigger: 'blur' }],
        type: [{ required: true, message: '线路编号不能为空', trigger: 'blur' }],
        startOrganId: [{ required: true, message: '线路编号不能为空', trigger: 'blur' }],
        endOrganId: [{ required: true, message: '线路编号不能为空', trigger: 'blur' }]
      }
    }
  },
  methods: {
    normalizer(node) {
      // 当子节点也就是children=[]时候去掉子节点
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children && node.children.length > 0 ? node.children : 0
      }
    },
    // 获取线路详情
    async getLineDetail(id) {
      this.lineFormData = await getTransportLineDetail(id)
    },
    // 确认
    async subLine() {
      if (this.lineFormData.id) {
        await editTransportLine(this.lineFormData)
        this.$message.success('修改成功')
      } else {
        await addTransportLine(this.lineFormData)
        this.$message.success('新增成功')
      }

      this.initTransportLine()
      this.close()
    },
    close() {
      this.lineFormData = {
        number: '',
        name: '',
        type: '',
        startOrganId: null,
        endOrganId: null
      }
      this.$refs.lineForm.resetFields()
      this.$parent.showLineDialog = false
    }

  }
}
</script>

<style>

</style>
